<template>
  <div>
      <transition name="tab">
        <tabbar v-show="isShow">
          <tabbar-item selected link="/wechat">
            <img slot="icon" src="./assets/index1.png">
            <span slot="label">Wechat</span>
          </tabbar-item>
          <tabbar-item  link="/message">
            <img slot="icon" src="./assets/index2.png">
            <span slot="label">Message</span>
          </tabbar-item>
          <tabbar-item  link="/explore">
            <img slot="icon" src="./assets/index3.png">
            <span slot="label">Explore</span>
          </tabbar-item>
          <tabbar-item  link="/news">
            <img slot="icon" src="./assets/index4.png">
            <span slot="label">News</span>
          </tabbar-item>
        </tabbar>
      </transition>

      <transition :name="animateType">
        
          <router-view></router-view>
       
      </transition>
  </div>
</template>

<script>
  import {Tabbar, TabbarItem} from 'vux'
  export default{
    name:'app',
    data:function(){
      return{
        animateType:'none',
        isShow:true
      }
    },
    components:{
      Tabbar,
      TabbarItem
    },
    watch:{
      // 监听路由变化，执行回调函数
      // para1：新路由对象
      // para2：旧路由对象
      $route:function(to,from){
        console.log(to)
        console.log(from)

        var toLevel = to.path.split('/').length
        var fromLevel = from.path.split('/').length
        console.log(toLevel)
        console.log(fromLevel)
        // 平级
        if(toLevel == fromLevel){
          this.animateType = 'none'
        }else if(toLevel > fromLevel){
            // 进入 （1->2,2->3...）
            this.animateType = 'in'
        }else{
           // 退出 （2->1,3->2..）
           this.animateType = 'out'
        }

        // tabbar的显隐控制
        // 一级页面显示，其他页面不显示
        if(toLevel > 2){
          this.isShow = false
        }else{
          this.isShow = true
        }

      }
    }
  }
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fbf9fe;
}

/*进入动画*/

.in-enter-active,.in-leave-active{
  transition: all 1s;
  position: absolute;
}
.in-enter{
  transform: translateX(100%);
}
.in-leave-active{
  transform: translateX(-100%);
}

/*退出的动画*/
.out-enter-active,.out-leave-active{
  transition: all 1s;
  position: absolute;
}
.out-enter{
  transform: translateX(-100%);
}
.out-leave-active{
  transform: translateX(100%);
}

/*tab动画*/
.tab-enter-active,.tab-leave-active{
  transition: all 1s;
}
.tab-enter{
  transform: translateX(-100%);
}
.tab-leave-active{
  transform: translateX(-100%);
}
</style>
